<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    System.out.println("here is login.jsp ,basePath:" + basePath);
%>
<jsp:include page="../commons/common.jsp" flush="true"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <base href="<%=basePath%>">
    <style type="text/css">
        /*css3背景图切换动画 开始*/
        .main {
            -webkit-animation: background 10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
            height: 100vh;
            width: 100%;
        }

        @-webkit-keyframes background {
            from {
                background: url(pages/commons/timg.jpg) no-repeat center;
                background-size: cover
            }
            to {
                background: url(pages/commons/bg-logo.jpg) no-repeat center;
                background-size: cover
            }
        }

        /*加灰幕*/
        .main-back {
            display: block;
            height: 100vh;
            width: 100%;
            background-color: rgba(85, 85, 85, 0.5);
        }

        /*css3背景图切换动画 结束*/
        /*css3发光圆角矩形CSS样式 开始*/
        @-webkit-keyframes shineRed {
            from {
                -webkit-box-shadow: 0 0 5px #bbb;
            }
            50% {
                -webkit-box-shadow: 0 0 10px red;
            }
            to {
                -webkit-box-shadow: 0 0 5px #bbb;
            }
        }

        @-webkit-keyframes shineBlue {
            from {
                -webkit-box-shadow: 0 0 9px #333;
            }
            50% {
                -webkit-box-shadow: 0 0 18px blue;
            }
            to {
                -webkit-box-shadow: 0 0 9px #333;
            }
        }

        .shine_blue {
            width: 370px;
            border: 1px solid powderblue;
            border-radius: 5px;
            -webkit-animation-name: shineBlue;
            -webkit-animation-duration: 3s;
            -webkit-animation-iteration-count: infinite;
        }

        .shine_red {
            border-radius: 5px;
            -webkit-animation-name: shineRed;
            -webkit-animation-duration: 3s;
            -webkit-animation-iteration-count: infinite;
        }

        p:hover {
            color: #fff;
            -webkit-animation: Glow 1.5s ease infinite alternate;
            animation: Glow 1.5s ease infinite alternate;
        }

        @-webkit-keyframes Glow {
            from {
                text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #00a67c,
                0 0 70px #00a67c,
                0 0 80px #00a67c,
                0 0 100px #00a67c,
                0 0 150px #00a67c;
            }
            to {
                text-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 15px #fff,
                0 0 20px #00a67c,
                0 0 35px #00a67c,
                0 0 40px #00a67c,
                0 0 50px #00a67c,
                0 0 75px #00a67c;
            }
        }

        @keyframes Glow {
            from {
                text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #00a67c,
                0 0 70px #00a67c,
                0 0 80px #00a67c,
                0 0 100px #00a67c,
                0 0 150px #00a67c;
            }
            to {
                text-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 15px #fff,
                0 0 20px #00a67c,
                0 0 35px #00a67c,
                0 0 40px #00a67c,
                0 0 50px #00a67c,
                0 0 75px #00a67c;
            }
        }

        /*css3发光圆角矩形CSS样式 结束*/
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #FFFFED;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }

        #username {
            border: 1px solid pink;
            /*width: 160px;*/
        }

        #password {
            border: 1px solid pink;
            /*width: 160px;*/
        }

        /*.bg{background-image:url(pages/commons/timg.jpg)}*/
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function () {
                var username = $("#username").val();
                if (username === '') {
                    alert("请输入用户名");
                    return;
                }
                var password = $("#password").val();
                if (password === '') {
                    alert("请输入密码");
                    return;
                }
            });
            $("#register").click(function () {
                window.location.href = "pages/book/regist.jsp"
            })
        });

    </script>
</head>

<body class="main" style="background-image: url(pages/commons/timg.jpg)">
<div class="header">
    <div class="am-g am-text-primary">
        <h1>Web Book Store Management platform</h1>
        <p>welcome access system<br/>欢迎访问系统</p>
    </div>
    <%--<hr/>--%>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered shine_blue">
        <h3 class="am-text-primary">sign in</h3>
        ${name}
        <form action="${pageContext.request.contextPath}/LoginServlet?operation=login" method="post" class="am-form">
            <div class="am-form-group ">
                <div class="field am-input-group am-input-group-primary">
                    <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
                    <input type="text" class="am-form-field" name="username" id="username" placeholder="Username">
                </div>
            </div>
            <div class="am-form-group ">
                <div class="field am-input-group am-input-group-primary">
                    <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                    <input type="password" class="am-form-field" name="password" id="password" placeholder="Password">
                </div>
            </div>

            <div class="am-cf">
                <input type="submit" value="登录" id="submit" class="am-btn am-btn-primary am-btn-sm am-fl"/>
                &nbsp;&nbsp;
                <input type="reset" value="重置" class="am-btn am-btn-default am-btn-sm"/>
            </div>
        </form>
        <button id="register" class="am-btn am-btn-warning am-btn-sm"> 注册</button>

        <hr>
        <p>© 2019 Web Book Store Management platform</p>
    </div>

</div>

</body>

</html>
